<template>

<div class="detail-main">
<div class="step">
  <el-steps :active="active" align-center finish-status="success">
    <el-step title="未付款" :description="paytext"></el-step>
    <el-step title="已付款" :description="paytext"></el-step>
    <el-step title="已发货" :description="sendtext"></el-step>
    <el-step title="已收货" :description="rectivetext"></el-step>
    <el-step title="已关闭" description=""></el-step>
  </el-steps>
</div>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix" style="display: flex">

      <div style="line-height: 40px;font-weight: bold">  订单状态:</div>
      <div style="margin-left: 10px">
        <img style="width: 40px;height: 40px" v-if="baselist.statusend == 0" src="@/assets/icon/pendings.png" alt="">
        <img style="width: 40px;height: 40px" v-else src="@/assets/icon/nowclose.png" alt="">
      </div>
    </div>
    <div>
    <div>基本信息:</div>
      <el-row  class="base-table" >
       <el-col :span="4" v-for="(value,key,index) in baslist">
        <div class="text ">{{key}}</div>
         <div class="val ">{{value}}</div>
       </el-col>
      </el-row>
      <div style="margin-top: 30px">收货人信息:</div>
      <el-row class="user-table">
       <el-col :span="6" v-for="(value,key) in userInfos">
        <div class="text ">{{key}}</div>
         <div class="val ">{{value}}</div>
       </el-col>
      </el-row>
<!--      订单列表-->
      <div style="margin-top: 30px;margin-bottom: 30px">订单详情:</div>
      <el-table
        :data="orderdetail"
        :border="true"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="#"
          type="index"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="商品图片"
          width="180">
          <template slot-scope="scope">
            <img style="width: 100px;height: 80%;" :src="scope.row.cover_img" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="gname"
          align="center"

          label="商品名称">
        </el-table-column>
        <el-table-column
          align="center"

          label="价格货号">
          <template slot-scope="scope">
            <div>价格:{{scope.row.price}}</div>
            <div>货号:{{scope.row.skuId}}</div>

          </template>
        </el-table-column>
        <el-table-column
          align="center"

          label="型号">

        </el-table-column>
        <el-table-column
          align="center"

          label="是否退货">
          <template slot-scope="scope">
            <div>否</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          align="center"

          label="数量">
        </el-table-column>
        <el-table-column
          prop="price"
          align="center"

          label="小计">
        </el-table-column>
      </el-table>

      <div class="total">合计:{{baselist.price}}</div>

    </div>
    <div style="margin-top: 20px;margin-bottom: 30px" >费用信息:</div>
      <el-row  class="peicr-base">
       <el-col :span="6" v-for="(value,key) in baseprice">
          <div class="text">{{key}}</div>
         <div class="val">{{value}}</div>
       </el-col>
      </el-row>
    <div class="bts">
      <el-button type="primary" @click="sendpro" v-show="active == 2">发货</el-button>
      <el-button type="primary" @click="closeorder" v-show="active == 4 && baselist.statusend == 0">关闭</el-button>
    </div>

  </el-card>
</div>
</template>

<script>
import productOrderApi from "@/api/product/productOrder";
export default {

  name: "OrderDetail",
  data() {
    return {
      id:"",
    baselist:[],
    ordertype:"",
      userinfo:{},
      orderdetail:[],
      active:0,
      //已付款显示文字
      paytext:"",
      sendtext:"",
      rectivetext:"",

    }

  },
  methods: {
  //获取订单详情列表基本信息
    getOrderList(val){
      productOrderApi.orderList({
        orderId:val
      })
      .then(res=>{
        console.log(res)
        this.baselist = res.data.list[0]
       this.ordertype = this.orderType(this.baselist.orderStatus)
        if(this.baselist.orderStatus == 0){
          this.paytext =""
        }else if (this.baselist.orderStatus == 1){
          this.active = 2
          this.paytext = this.baselist.payTime
        }else if (this.baselist.orderStatus == 2){
          this.active = 3
          this.paytext = this.baselist.payTime
          this.sendtext = this.baselist.sendTime
        }else if (this.baselist.orderStatus == 3){
          this.active = 4
          this.paytext = this.baselist.payTime
          this.sendtext = this.baselist.sendTime
          this.rectivetext = this.baselist.receiveTime
        }else if(this.baselist.statusend == 1){
          this.active = 5
          this.paytext = this.baselist.payTime
          this.sendtext = this.baselist.sendTime
          this.rectivetext = this.baselist.receiveTime
        }
      })
    },
    //判定当前的订单状态
    orderType(val){
      if(val == 0){
        return "未付款"
      }else if(val == 1){
        return "已付款"
      }else if(val == 2){
        return "已发货"
      }else if (val == 3){
        return '已收货'
      }else if (val == 9){
        return "申请退款"
      }
    },
    //获取用户地址详情
    getUserInfo(val){
      productOrderApi.orderUser({
        orderId:val
      })
        .then(res=>{
          console.log(res)
          this.userinfo = res.data;

        })
    },
    //sendpro   发货
    sendpro(){
    productOrderApi.sendDone({
      id:this.id
    })
      .then(res=>{
        console.log(res)
        if (res.code == 'S'){
          this.$message.success('发货成功!!!!')
          this.refsh()

        }

      })
    },
    //关闭当前订单
    closeorder(){
      productOrderApi.closeOrder({
        id:this.id
      })
      .then(res=>{
        console.log(res)
        if (res.code == 'S'){
          this.$message.success('关闭订单!!!!')
          this.refsh()
        }

      })
    },
    //刷新页面
    refsh(){
      this.getOrderList(this.id)
      this.getUserInfo(this.id)
      this.getorderDetail(this.id)
    },
    //获取列表
    getorderDetail(val){
      productOrderApi.orderDetail({
        orderId:val
      })
        .then(res=>{
          console.log(res)
          this.orderdetail = res.data;
        })
    }
  },
  computed:{
    baslist(){
      return {
        "订单编号":this.baselist.orderId,
        "用户账号":this.baselist.username,
        "订单金额":this.baselist.price,
        "订单数量":this.baselist.count,
        "订单状态":this.ordertype,
        "下单时间":this.baselist.addTime,
        "付款时间":this.baselist.payTime,
        "发货时间":this.baselist.sendTime,
        "收货时间":this.baselist.receiveTime,
        "退单时间":this.baselist.backTime,
        "结束时间":"",
        "其他":""
      }
    },
    userInfos(){
      return {
       "用户名":this.userinfo.username,
        "收货人":this.userinfo.name,
        "手机号码":this.userinfo.tel,
        "邮政编码":"41000",
        "地市":this.userinfo.cityStr,
        "详细地址":this.userinfo.cityBak
      }
    },
    baseprice(){
      return {
        "商品合计(￥)":this.baselist.price,
        "运费":0,
        "订单金额(￥)":this.baselist.price,
        "实付款(￥)":this.baselist.price
      }
    }
  },
  created(){
  let id = this.$route.params.id
    this.id =id
  this.getOrderList(id)
    this.getUserInfo(id)
    this.getorderDetail(id)
  }

}
</script>

<style lang="scss" scoped>
.detail-main{
  width: 100%;
  .step{
    width: 70%;
    margin-top: 50px;
    margin-left: 200px;
  }
  .box-card{
    width: 95%;
    margin: 0 auto;
    margin-top: 50px;
    .base-table{
      border: 1px solid #E6E8ED;
      margin-top: 30px;
      .text{
        width: 100%;
        background-color: #F6F7FA;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #BDBDBD;
      }
      .val{
        width: 100%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        border-right: 1px solid #E0EEFC;

      }
    }
    .user-table{
      border: 1px solid #E6E8ED;

      margin-top: 30px;
      .text{
        width: 100%;
        background-color: #F6F7FA;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #BDBDBD;
        border-bottom: 1px solid #BDBDBD;
      }
      .val{
        width: 100%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        border-right: 1px solid #E0EEFC;
        border-bottom: 1px solid #BDBDBD;
      }
    }
    .total{
      margin-top: 20px;
      text-align: right;
    }
  .peicr-base{
    .text{
      width: 100%;
      background-color: #F6F7FA;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-right: 1px solid #BDBDBD;
      border-bottom: 1px solid #BDBDBD;
    }
    .val{
      width: 100%;
      text-align: center;
      height: 60px;
      line-height: 60px;
      border-right: 1px solid #E0EEFC;
      border-bottom: 1px solid #BDBDBD;
    }
  }
    .bts{
      margin-top: 50px;
      margin-bottom: 80px;
      text-align: center;
    }
  }
}
</style>
